<!-- 用户停用及重新分配 -->
<template>
  <div class="udar-con">
    <div class="item-row tip"><a-icon type="warning" style="margin: 0 10px;"/>停用后，下列企业无绑定的内部员工，请重新分配开票员！</div>
    <div class="item-row">
      <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="tableData"
      style="width: 100%;"
      bordered
      :pagination="pagination"
      :scroll="{y:400}"
      @change="tableChangeEvent"
    />
    </div>
    <div class="item-row btn-group">
      <a-button type="primary" @click.prevent="nextEvent">下一步 </a-button>
      <a-button type="link" @click="closeEvent_">暂不配置 </a-button>
    </div>
  </div>
</template>

<script>
import getDataDB from '@/api/InvoiceIssuer.js'
import tableConfig from './utils/tableConfig'
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'UserDeactivationAndReassignment',
  components: {},
  props: {
    closeEvent: {
      type: Function,
    },
    Setloading: {
      type: Function,
    },
    // 用于传递到组件中的数据
    data: {
      type: [Array, Object],
      required: true,
    },
  },
  data() {
    // 这里存放数据
    return {
      tableData: [],
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        showSizeChanger: true,
        total: 0
      },
      columns:tableConfig('UserDeactivationAndReassignment'),
      selectedRowKeys: [],
      selectedRows:[],
      udarData: {}
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    data: {
      handler(val) {
       if (!this.isType.isNullOrUnDef(val) && !this.isType.isEmpty(val)) {
          this.udarData = val
          this.setTableData(val)
       }
      },
      deep: true,
      immediate: true
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {  },
  // 方法集合
  methods: {
    tableChangeEvent(pagination, ...args){
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.data.event({current:pagination.current, pageSize: pagination.pageSize}, this.setTableData)
    },
    setTableData(data_) {
      let res = data_.table
      if(this.isType.isNullOrUnDef(data_.table)) {
        res = data_
      }
      const {records, total, current, size  } = res
      this.pagination.current = current
      this.pagination.pageSize = size
      this.pagination.total = total
      this.tableData = records
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows
    },
    // 下一步
    nextEvent(){
      if(this.selectedRowKeys.length ==0 ){
        this.$message.warning('请选择要重新分配的数据后再进行操作！')
        return false
      }
      this.closeEvent(false,{type:'udar-next', data: this.selectedRows})
    },
    closeEvent_(){
      const param = {
        "bizNo": this.data.detail.channelId,
        "bizType": this.data.detail.bizType,
        "id": this.data.detail.id,
        "idCard": this.data.detail.idCard,
        "list":  this.selectedRows.map(item => {
          return { "entId": item.entId, "id": item.entId, "parentId": item.entId, "password": item.entId, "phone": item.entId, "source": 2, "type": 2 }
        }),
        "name": this.data.detail.name,
        // "password": this.data.detail.idCard,
        "phone": this.data.detail.phone,
        "source": 2,
        "type": 2
      }
      getDataDB('停用开票人', param).then(res => {
        if (res.success == true) {
          this.$message.success('操作成功')
          this.closeEvent(false,{type:'udar-close', data: this.selectedRows})
        } else {
          this.$message.warning(res.message)
        }
      })
      // this.closeEvent(false,{type:'udar-close', data: this.selectedRows})
    },
  },
  }
</script>
<style lang='less'>
.udar-con{
  width: 100%;
  display: flex;
  justify-content:flex-start;
  align-items:center;
  flex-direction: column;
  // padding: 10px 0;
  box-sizing: border-box;

  .item-row{
    width: 100%;
    display: flex;
    justify-content:flex-start;
    align-items:center;
    margin: 5px 0;
    &.tip{
      color: #E6A23C;
    }
    &.btn-group{
      justify-content:center;

    }
  }
}
</style>
